<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0">
    <title></title>
</head>
<body>
    <div id="inp"></div>
    <script>

        function load(){

            document.addEventListener('touchstart',touch,false)
            document.addEventListener('touchmove',touch,false)
            document.addEventListener('touchend',touch,false)

            var startX = 0,startY = 0
            var movedX = 0,movedY = 0
            var endX   = 0,endY   = 0
            var direction = 0

            function touch (event){
                var event = event || window.event

                var oInp = document.getElementById('inp')

                oInp.innerHTML = ''


                switch (event.type){
                    case 'touchstart':
                        startX = event.touches[0].clientX
                        startY = event.touches[0].clientY
                        break;
                    case 'touchmove':
                        break;
                    case 'touchend':
                        endX = event.changedTouches[0].clientX
                        endY = event.changedTouches[0].clientY
                        break;
                }

                movedX = endX - startX
                movedY = endY - startY

                direction = Math.abs(endX - startX) < Math.abs(endY - startY) ? 1 : 0  // 1 垂直 0 水平

                if(direction == 1){ //垂直
                    if(movedY > 10){
//                        alert("move top")
                        oInp.innerHTML = '( '+startX + ',' + startY +' ) <br/>' + ' move bottom <br/>( '+endX + ',' + endY +' ) <br/>'
                    }
                    if(movedY < -10){
//                        alert('move bottom')
//                        oInp.innerHTML = '<br/>move top'
                        oInp.innerHTML = '( '+startX + ',' + startY +' ) <br/>' + ' move top <br/>( '+endX + ',' + endY +' ) <br/>'

                    }
                }
                if(direction == 0){
                    if(movedX > 10){
//                        alert('move left')
//                        oInp.innerHTML = '<br/>move right'
                        oInp.innerHTML = '( '+startX + ',' + startY +' ) <br/>' + ' move right <br/>( '+endX + ',' + endY +' ) <br/>'

//                        window.location.href = 'http://www.baidu.com/'

                    }
                    if(movedX < -10){
//                        alert('move right')
//                        oInp.innerHTML = '<br />move left'
                        oInp.innerHTML = '( '+startX + ',' + startY +' ) <br/>' + ' move left <br/>( '+endX + ',' + endY +' ) <br/>'


                    }
                }

                /*switch(event.type){
                    case 'touchstart':
                            oInp.innerHTML = 'Touch started (' + event.touches[0].clientX + ' , ' + event.touches[0].clientY + ')'
                        break;
                    case 'touchmove':
                            event.preventDefault()
                            oInp.innerHTML = '<br /> Touch moved (' + event.touches[0].clientX + ' , ' + event.touches[0].clientY + ')'
                        break;
                    case 'touchend':
                            oInp.innerHTML = '<br />Touch end (' + event.changedTouches[0].clientX + ' , ' + event.changedTouches[0].clientY +')'
                        break;
                }*/
            }
        }
        window.addEventListener('load',load,false)
    </script>
</body>
</html>